<template>
  <el-form
    ref="loginForm"
    :model="loginForm"
    :rules="loginRules"
    class="login-form mt-10"
    auto-complete="on"
    label-position="left"
  >
    <el-form-item prop="account">
      <el-input
        ref="account"
        v-model="loginForm.account"
        placeholder="用户名"
        name="account"
        type="text"
        tabindex="1"
        autocomplete="on"
      >
        <svg-icon class="svg-container" icon-class="user" slot="prefix" />
      </el-input>
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        ref="password"
        v-model="loginForm.password"
        :type="passwordType"
        placeholder="密码必须包含字母和数字,且在6~18位之间"
        name="password"
        tabindex="2"
        @keyup.enter.native="handleLogin"
      >
        <svg-icon class="svg-container" slot="prefix" icon-class="password" />
        <svg-icon
          :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          slot="suffix"
          @click="showPwd"
        />
      </el-input>
    </el-form-item>
    <div class="clearfix">
      <el-checkbox v-model="checked">记住我</el-checkbox>
      <el-link type="primary" class="float-r" @click="jumpForgetPswd">忘记密码？</el-link>
    </div>

    <el-button
      :loading="loading"
      type="primary"
      style="width:100%;margin-top:40px;"
      @click.native.prevent="handleLogin"
    >登录</el-button>
  </el-form>
</template>

<script>
import { validPswd } from "@/utils/validate";
import {
  getToken,
  getRemember,
  setRemember,
  removeRemember
} from "@/utils/auth";
import md5 from "js-md5";
import { Decrypt, Encrypt } from "@/utils/secret";
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      }
      if (!validPswd(value)) {
        return callback(new Error("密码必须包含字母和数字,且在6~18位之间"));
      }
      callback();
    };
    return {
      passwordType: "password",
      checked: true,
      loading: false,
      loginForm: {
        account: "",
        password: ""
      },
      loginRules: {
        account: [
          { required: true, trigger: "blur", message: "用户名不能为空" }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      }
    };
  },
  created() {
    if (getRemember()) {
      let info = JSON.parse(getRemember());
      // 如果有缓存
      this.loginForm.account = info.account;
      this.loginForm.password = Decrypt(info.password); //解密
    }
  },
  methods: {
    jumpForgetPswd(){
      this.$emit('jumpForgetPswd')
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          let loginData = {
            account: this.loginForm.account,
            password: md5(this.loginForm.password)
          };
          this.$store
            .dispatch("user/login", loginData)
            .then(() => {
              if (this.checked == true) {
                //传入账号，密码，保存天数
                setRemember(
                  Object.assign({}, this.loginForm, {
                    password: Encrypt(this.loginForm.password)
                  })
                );
              } else {
                //清空Cookie
                removeRemember();
              }
              this.$router.push({ path: this.redirect || "/" });
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
              this.$message.error(err.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
</style>
